<template>
    <div>
        <div class="shopcar-wrapper">
            <div class="content">
                <div class="content-left">
                    <div class="log-wrapper" @click="show">
                        <div class="log" :class="{'has-food': foodCount>0}">
                            <i class="icon-shopping_cart"></i>
                        </div>
                    </div>
                    <div class="count" v-show="foodCount">{{foodCount}}</div>
                    <div class="price" :class="{'has-count': foodPrice>0}">￥{{foodPrice}}</div>
                    <div class="desc">另需配送费￥{{seller.deliveryPrice}}元</div>
                </div>
                <div class="content-right" :class="{'cal': priceDif<=0}">
                    <div class="minPrice" v-if="!foodCount">￥{{seller.minPrice}}起送</div>
                    <div class="minPrice" v-else-if="priceDif>0">还差￥{{priceDif}}起送</div>
                    <div class="minPrice cal" v-else>去结算</div>
                </div>
            </div>
            <div class="ball-container">
                <div v-for="(ball, index) in balls" :key="index">
                    <transition @before-enter="beforeDrop" @enter="droping" @after-enter="afterDrop">
                        <div class="ball" v-show="ball.show">
                            <div class="inner inner-hook"></div>
                        </div>
                    </transition>
                </div>
            </div>
        </div>
        <transition name="fold">
            <div class="order-wrapper" v-show="isShow">
                <div class="header border-1px">
                    <div class="shopcar">购物车</div>
                    <div class="clear" @click="clearFoods">清空</div>
                </div>
                <div class="order-list" ref="orderList">
                    <ul>
                        <li class="order-item border-1px" v-for="(food, index) in selectFoods" :key="index">
                            <div class="food-name">{{food.name}}</div>
                            <div class="food-desc">
                                <div class="price">￥{{food.count*food.price}}</div>
                                <div class="control-wrapper">
                                    <carcontrol :food="food" @add="drop"></carcontrol>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </transition>
        <transition name="fade">
            <div class="hidden-screen" v-show="isShow" @click="show"></div>
        </transition>
    </div>
</template>

<script>
import carcontrol from 'components/carcontrol/carcontrol.vue'
import BScroll from 'better-scroll'
export default {
    props: {
        selectFoods: {
            type: Array,
            default: () => {
                return []
            }
        },
        seller: {
            type: Object
        }
    },
    data () {
        return {
            balls: [
                {show: false},
                {show: false},
                {show: false},
                {show: false},
                {show: false}
            ],
            orderList: null,
            isShow: false,
            dropballs: []
        }
    },
    methods: {
        _initBScroll() {
            this.orderList = new BScroll(this.$refs.orderList, {
                click: true
            })
        },
        show() {
            this._hasSelectGood()
        },
        _hasSelectGood() {
            if (this.selectFoods.length) {
                this.isShow = !this.isShow
                if (this.isShow) {
                    this.$nextTick(() => {
                        if (!this.scroll) {
                            this.scroll = new BScroll(this.$refs.orderList, {
                                click: true
                            })
                        } else {
                            this.scroll.refresh()
                        }
                    })
                }
            }
        },
        drop(el) {
            for (let i = 0, len = this.balls.length; i < len; i++) {
                let ball = this.balls[i]
                if (!ball.show) {
                    ball.show = true
                    ball.el = el
                    this.dropballs.push(ball)
                    return null
                }
            }
        },
        beforeDrop(el) {
            let count = this.balls.length
            while (count--) {
                let ball = this.balls[count]
                if (ball.show) {
                    let rect = ball.el.getBoundingClientRect()
                    let x = rect.left - 34
                    let y = -(window.innerHeight - rect.top - 38)
                    el.style.display = ''
                    el.style.webkitTransform = `translate3d(0,${y}px,0)`
                    el.style.transform = `translate3d(0,${y}px,0)`  
                    let inner = el.getElementsByClassName('inner-hook')[0]
                    inner.style.webkitTransform = `translate3d(${x}px, 0, 0)`
                    inner.style.transform = `translate3d(${x}px, 0, 0)`
                }
            }
        },
        droping(el, done) {
            // eslint-disable-next-line no-unused-expressions
            el.offsetHeight
            this.$nextTick(() => {
                el.style.webkitTransform = 'translate3d(0,0,0)'
                el.style.transform = 'translate3d(0,0,0)'
                let inner = el.getElementsByClassName('inner-hook')[0]
                inner.style.webkitTransform = 'translate3d(0,0,0)'
                inner.style.transform = 'translate3d(0,0,0)'
                el.addEventListener('transitionend', done)
            })
        },
        afterDrop(el) {
            let ball = this.dropballs.shift()
            if (ball.show) {
                ball.show = false
                el.style.display = 'none'
            }
        },
        clearFoods() {
            this.selectFoods.forEach((food) => {
                food.count = 0
            })
        }
    },
    computed: {
        foodCount() {
            let count = 0
            if (!this.selectFoods.length) {
                return 0
            }
            for (let i = 0, len = this.selectFoods.length; i < len; i++) {
                count += this.selectFoods[i].count
            }
            return count
        },
        foodPrice() {
            let price = 0
            if (!this.selectFoods.length) return 0
            for (let i = 0, len = this.selectFoods.length; i < len; i++) {
                price += this.selectFoods[i].price * this.selectFoods[i].count
            }
            return price
        },
        priceDif() {
            return this.seller.minPrice - this.foodPrice
        }
    },
    watch: {
        selectFoods(newFoods, oldFoods) {
            if (!newFoods.length) {
                this.isShow = false
            }
        }
    },
    components: {
        carcontrol
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixin.styl'
.shopcar-wrapper
    position: fixed
    left: 0
    bottom: 0
    width: 100%
    z-index: 10
    .content
        display: flex
        width: 100%
        height: 50px
        .content-left
            display: flex
            align-items: center
            position: relative
            flex: 1
            background: #141d27
            .log-wrapper
                position: relative
                top: -8px
                left: 12px
                width: 48px
                height: 48px
                border-radius: 50%
                padding: 6px
                line-height: 50px
                background: #141d27
                .log
                    height: 100%
                    border-radius: 50%
                    background: rgb(43,52,60)
                    color: rgb(128,133,138)
                    font-size: 24px
                    text-align: center
                    &.has-food
                        color: white
                        background: rgb(0, 160, 220)
            .count
                position: absolute
                top: -11px
                left: 46px
                width: 23px
                height: 16px
                border-radius: 8px
                background: rgb(240, 20, 20)
                font-size: 9px
                font-weight: 700
                color: white
                line-height: 16px
                text-align: center
                box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4)
            .price
                font-size: 18px
                color: rgba(255, 255, 255, 0.4)
                line-height: 24px
                border-right: 1px solid rgba(255,255,255,0.1)
                padding: 0 12px 0 18px
                margin-right: 12px
                &.has-count
                    color: white
            .desc
                font-size: 12px
                color: rgba(255, 255, 255, 0.4)
                font-weight: 200
                line-height: 24px
        .content-right
            flex: 0 0 105px
            width: 105px
            background: rgb(43, 51, 59)
            display: flex
            align-items: center
            justify-content: center
            color: rgba(255,255,255,0.4)
            &.cal
                background: #00b43c
                color: white
            .minPrice
                font-size: 14px
                font-weight: 700
    .ball-container
        .ball
            position: fixed
            left: 34px
            bottom: 38px
            z-index: 200 
            transition: all 0.4s cubic-bezier(.31,-0.55,.87,.45)
            .inner
                width: 16px
                height: 16px
                border-radius: 50%
                background: rgb(0,160,220)
                transition: all 0.4s linear
.order-wrapper
    position: absolute
    bottom: 0
    left: 0
    width: 100%
    z-index: 5
    max-height: 257px
    background: #fff
    opacity: 1
    transform: translate3d(0, 0, 0)
    &.fold-enter-active, &.fold-leave-active
        transition: all .5s ease
    &.fold-enter
        transform: translate3d(0, 257px, 0)
        opacity: 0
    .header
        display: flex
        justify-content: space-between
        align-items: center
        padding: 0 18px
        height: 40px
        line-height: 40px
        background: rgb(243,245,247)
        border-bottom: 1px solid rgba(7, 17, 27, 0.1)
        .shopcar
            font-size: 14px
            font-weight: 200
            color: rgb(7, 17, 27)
        .clear
            font-size: 12px
            color: rgb(0, 160, 220)
    .order-list
        padding: 0 18px
        overflow: hidden
        max-height: 217px
        .order-item
            position relative
            display: flex
            justify-content: space-between
            align-items: center
            height: 48px
            line-height: 24px
            font-size: 14px
            border-bottom: 1px solid rgba(7, 17, 27, 0.1)
            .food-name
                color: rgb(7, 17, 27)
            .food-desc
                flex: 0 0 129px
                display: flex
                justify-content: space-between
                .price
                    padding-left: 18px
                    font-size: 14px
                    font-weight: 700
                    color: rgb(240, 20, 20)
                .control-wrapper
                    position: absolute
                    right: 0
                    top: 38px
.hidden-screen
    position: fixed
    left: 0
    top: 0
    width: 100%
    height: 100%
    background: rgba(7, 17, 27, 0.6)
    backdrop-filter: blur(8px)
    opacity: 1
    &.fade-enter-active
        transition: all .3s ease
    &.fade-enter
        opacity: 0
    &.fade-leave-active
        transition: all .5s ease
</style>
